<template>
	<div
		v-if="consult"
		class='consult-detail'
	>
		<!-- 学长学姐信息 -->
		<el-descriptions
			title="学长学姐信息"
			:column="3"
			border
		>
			<template slot="extra">
				<el-button
					type="primary"
					size="small"
					@click="$pushTo('ConsultDetail', {siId:consult.seniorInfo.siId})"
				>
					编辑学长学姐信息
				</el-button>
			</template>
			<el-descriptions-item>
				<template slot="label">
					<i class="el-icon-user" />
					昵称
				</template>
				{{consult.seniorInfo.siNickName}}
			</el-descriptions-item>
			<el-descriptions-item>
				<template slot="label">
					<i class="el-icon-mobile-phone" />
					手机号
				</template>
				{{consult.seniorInfo.siPhone}}
			</el-descriptions-item>
			<el-descriptions-item>
				<template slot="label">
					<i class="el-icon-time" />
					可约时间
				</template>
				{{consult.seniorInfo.siAccessibleTime}}
			</el-descriptions-item>
			<el-descriptions-item>
				<template slot="label">
					学院
				</template>
				{{consult.seniorInfo.siAcademy}}
			</el-descriptions-item>
			<el-descriptions-item>
				<template slot="label">
					价格
				</template>
				{{consult.seniorInfo.siUnitPrice}}Aha币/30分钟
			</el-descriptions-item>
			<el-descriptions-item>
				<template slot="label">
					<i class="el-icon-collection-tag" />
					右上角标签
				</template>
				<el-tag
					size="small"
					v-for="tag in splitTag(consult.seniorInfo.siOrientation)"
					:key="tag"
				>
					{{tag}}
				</el-tag>
			</el-descriptions-item>
			<el-descriptions-item>
				<template slot="label">
					<i class="el-icon-collection-tag" />
					标签
				</template>
				<el-tag
					style="margin-right: 5px;"
					size="small"
					v-for="tag in splitTag(consult.seniorInfo.siPersonalTag)"
					:key="tag"
				>
					{{tag}}
				</el-tag>
			</el-descriptions-item>
		</el-descriptions>
		<!-- 咨询人信息 -->
		<el-descriptions
			class="item"
			title="咨询人信息"
			:column="3"
			border
		>
			<el-descriptions-item>
				<template slot="label">
					<i class="el-icon-user" />
					昵称
				</template>
				{{consult.userInfo.nickname}}
			</el-descriptions-item>
			<el-descriptions-item>
				<template slot="label">
					<i class="el-icon-mobile-phone" />
					手机号
				</template>
				{{consult.userInfo.phone}}
			</el-descriptions-item>
			<el-descriptions-item>
				<template slot="label">
					<i class="el-icon-time" />
					预约时间
				</template>
				<div
					class="time"
					v-html="formatConsultTime(consult.orderMap.soAppointDate, consult.orderMap.soOrderTime)"
				/>
			</el-descriptions-item>
			<el-descriptions-item>
				<template slot="label">
					支付Aha币
				</template>
				{{consult.orderMap.seniorContributeOrderVo.totalCost}}Aha币 - {{consult.orderMap.seniorContributeOrderVo.totalCost/consult.seniorInfo.siUnitPrice*30}}分钟
			</el-descriptions-item>
			<el-descriptions-item>
				<template slot="label">
					支付时间
				</template>
				{{payTime}}
			</el-descriptions-item>
			<el-descriptions-item>
				<template slot="label">
					订单状态
				</template>
				<el-tag :type="consultOrderStatus[consult.scpStatusInfoVo.code].type">
					{{consult.scpStatusInfoVo.name}}
				</el-tag>
				<div>{{consult.scpNote}}</div>
			</el-descriptions-item>
		</el-descriptions>
		<!-- 咨询人一些其他信息 -->
		<div class="item">
			<div class="title">咨询人的提问:</div>
			{{consult.scpConsult || '无提问'}}
		</div>
		<!-- 附件 -->
		<div class="item">
			<div class="title">附件</div>
			<div
				class="file"
				v-for="file in files"
				:key="file.fileId"
				@click="onclickFile(file)"
			>
				<div class="name">{{file.filename}}</div>
				<i class="el-icon-download" />
			</div>
			<div v-if="files.length===0">无附件信息</div>
		</div>
		<el-form
			class="item control"
			ref="informForm"
			label-width="100px"
			:model="consult"
		>
			<!-- 会议号 -->
			<el-form-item	label="会议号">
				<el-input
					type="text"
					placeholder="会议房间信息"
					v-model="consult.scpConferenceInfo"
				/>
			</el-form-item>
			<!-- 确定的会议时间 -->
			<el-form-item
				label="会议时间"
			>
				{{formatConsultTime(meetingTime.date, meetingTime.time)}}
				<el-button
					v-if="consultOrderStatus[consult.scpStatusInfoVo.code].value!=='error'"
					style="margin-left: 10px;"
					type="primary"
					size="mini"
					@click="changeMeetingTime"
				>
					修改预约时间
				</el-button>
			</el-form-item>
			<!-- 按键：确定会议信息 & 订单已完成 & 退款 -->
			<el-form-item
				v-if="consultOrderStatus[consult.scpStatusInfoVo.code].value!=='error'"
				class="btns"
			>
				<el-button
					class="sure"
					@click="serverConnect"
				>
					我负责该订单
				</el-button>
				<el-button
					class="sure"
					type="primary"
					@click="onclickCheckedOrder"
				>
					确认会议信息 - 完成对接
				</el-button>
				<el-button
					class="cancel"
					type="danger"
					size="mini"
					@click="onclickRefund"
				>
					退款
				</el-button>
			</el-form-item>
		</el-form>
		<TimeSelect
			v-if="leisureTime"
			:leisureTime="leisureTime"
			:meetingTime="meetingTime"
			@close="leisureTime=null"
			@sure="updateMeetingTime"
		/>
	</div>
</template>

<script>
import {
  getConsultOrderDetail,
  getConsultFiles,
  updateMeetingTime,
  connectOrderWithService,
  refundOrder,
  updateOrderStatus,
  updateOrderMeetingInfo
} from '@user/api/order'
import {
  getLeisureTime,
} from '@user/api/consult'
import { consultOrderStatus } from '@user/constants/consult'
import TimeSelect from './components/TimeSelect.vue'

export default {
  route: {
    meta: {
      login: true,
      showLeft: true,
      activeName: 'Order',
    },
  },
  components: {
    TimeSelect
  },
  data() {
    return {
      consultOrderStatus, // 咨询订单状态
      consult: null, // 咨询对象
      files: [], // 附件列表
      leisureTime: null, // 可预约时间
      meetingTime: '', // 实际咨询时间
    }
  },
  computed: {
    formatConsultTime() {
      return function(date, time) {
        const weekMap = {
          1: '星期一',
          2: '星期二',
          3: '星期三',
          4: '星期四',
          5: '星期五',
          6: '星期六',
          0: '星期日',
        }

        /* 格式化日期和星期 */
        let str = moment(date).format('YYYY/MM/DD')

        str += ` ${ weekMap[ moment(date).weekday() ] } `

        /* 格式化时间区间 */
        const formatTime = (timeIndex) => `${ Math.floor(timeIndex / 2) }:${ timeIndex % 2 === 0 ? '00' : '30' }`

        time = time.split('|')
        const startTime = time[ 0 ]
        const endTime = time[ time.length - 1 ]

        str += `${ formatTime(+startTime) } ~ ${ formatTime(+endTime + 1) }`

        return str
      }
    },
    splitTag() {
      return function(tagStr) {
        return tagStr.split('|').filter(item => item)
      }
    },
    payTime() {
      return moment(this.consult.orderMap.seniorContributeOrderVo.payTime).format('YYYY-MM-DD HH:mm:ss')
    }
  },
  async created() {
    await this.loadOrder()
  },
  methods: {
    /**
		 * 客服分配
		 */
    async	serverConnect() {
      this.$loading()
      try {
        await connectOrderWithService(this.$route.query.scpId)
        this.$success('已负责该订单')
      } catch (err) {
        console.log(err)
      }
      this.$hideLoading()
    },
    /**
		 * 加载订单详情
		 */
    async loadOrder() {
      try {
        const res = (await getConsultOrderDetail(this.$route.query.scpId)).data

        this.consult = res
        this.consult.orderMap = this.consult.orderTime[ 0 ]

        this.meetingTime = {
          date: moment(this.consult.orderTime[ 0 ].soAppointDate).format('YYYY/MM/DD'),
          time: this.consult.orderTime[ 0 ].soOrderTime
        }
        /* 加载附件 */
        this.files = (await getConsultFiles(this.$route.query.scpId)).data

        console.log(this.files)
        console.log(res)
      } catch (err) {
        console.log(err)
      }
    },
    /**
		 * 点击修改预约时间
		 */
    async changeMeetingTime() {
      this.$loading()
      try {
        this.leisureTime = (await getLeisureTime(this.consult.seniorInfo.siId)).data
      } catch (err) {
        console.log(err)
      }
      this.$hideLoading()
    },
    /**
		 * 确认更新咨询时间
		 */
    async updateMeetingTime(e) {
      this.$loading()
      try {
        await updateMeetingTime({
          orderId: this.consult.orderMap.soId,
          soAppointDate: moment(e.date).format('YYYY-MM-DD 00:00:00'),
          soOrderTime: e.time
        })

        this.meetingTime = e
        /* 关闭弹窗 */
        this.leisureTime = null
        this.$success('修改会议时间成功')
      } catch (err) {
        console.log(err)
      }
      this.$hideLoading()
    },
    /**
		 * 点击确认会议信息
		 */
    async onclickCheckedOrder() {
      if (!this.consult.scpConferenceInfo) {
        this.$error('请写入会议信息，会议号，链接等')
        return
      }
      this.$loading()
      try {
        /* 更新会议信息 */
        await updateOrderMeetingInfo({
          scpId: this.$route.query.scpId,
          scpConferenceInfo: this.consult.scpConferenceInfo
        })
        /* 更新咨询状态 */
        await updateOrderStatus({
          scpId: this.$route.query.scpId,
          status: 1
        })
        this.$success('操作成功')
        this.loadOrder()
      } catch (err) {
        console.log(err)
      }
      this.$hideLoading()
    },
    /**
		 * 点击文件
		 */
    onclickFile(file) {
      window.open(file.url)
    },
    /**
		 * 点击退款
		 */
    onclickRefund() {
      this.$confirm('确认退款该订单?!!!!', async() => {
        this.$loading()
        try {
          await refundOrder(this.consult.orderMap.soId)
          await updateOrderStatus({
            scpId: this.$route.query.scpId,
            status: 2,
            scpNote: '订单已退款'
          })
          this.$success('订单已退款')
          this.loadOrder()
        } catch (err) {
          console.log(err)
        }
        this.$hideLoading()
      })
    }
  }
}
</script>

<style lang='scss' scoped>
.consult-detail {
  padding: 20px;
  white-space: pre-wrap;

  .item {
    margin-top: 20px;

    .title {
      font-size: $sLarge;
      font-weight: bold;
      color: $blue;
    }

    .time {
      width: 130px;
      text-align: center;
    }
  }

  /* 附件 */
  .file {
    display: flex;
    margin-top: 10px;
    cursor: pointer;

    .name {
      font-weight: bold;
      text-decoration: underline;
    }

    i {
      margin-left: 10px;
      font-size: $sLarge;
    }
  }

  .control {
    .add-file-icon {
      font-size: $sLarger;
      color: $blue;
    }
  }
}
</style>
